<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/static/css/chat-module.min.css">
</head>
<body>
<div class="cm-chat-container cm-chat-show" style="display: block; visibility: visible;">
    <div class="cm-chat-content cm-chat-content-show">
        <div class="cm-chat-content-shadow" style="display: none;"><span
                class="cm-chat-loading fa fa-spinner fa-spin"></span></div>
        <div class="cm-chat-content-right">
            <div class="cm-content-up">
                <div class="cm-chat-name"><span id="userName" class="cm-chat-name-text" data-user="1" data-chat="1"
                                                data-thumb="static/img/head/head5.png">张桂英</span>
                </div>
                <div class="cm-chat-settings">
                    <div class="cm-chat-setting">
                        <div class="cm-chat-setting-holder"><span id="detail" class="fa fa-plus">详细</span></div>
                        <div class="cm-chat-setting-holder"><span id="upload" class="fa fa-cog">下载附件</span></div>
                    </div>
                </div>
            </div>
            <div class="cm-content-middle">
                <div id="infoList" class="cm-history-wrapper" style="width: 100%">
                    <ul id="cm_history_list" class="cm-history-list" style="width: 100%">
                        <c:forEach items="${orderInfo.infos}" var="info">
                            <li class="cm-history-item">
                                <!--用户消息-->
                                <c:if test="${info.senderType == 1}">
                                    <div class="cm-history-otherhead cm-history-item-head"><img
                                            src="${pageContext.request.contextPath}/static/img/head/head5.png">
                                    </div>
                                    <div class="cm-history-othermessage cm-history-item-message">
                                        <span>
                                            <c:out value="${info.senderContent}"></c:out>
                                        </span>
                                    </div>
                                </c:if>
                                <!--客服消息-->
                                <c:if test="${info.senderType == 2}">
                                    <div class="cm-history-myhead cm-history-item-head"><img
                                            src="${pageContext.request.contextPath}/static/img/head/head4.png">
                                    </div>
                                    <div class="cm-history-mymessage cm-history-item-message">
                                        <span>
                                            <c:out value="${info.senderContent}"></c:out>
                                        </span>
                                    </div>
                                </c:if>
                            </li>
                        </c:forEach>
                    </ul>
                </div>
            </div>
            <c:if test="${orderInfo.isFinish == 0}">
                <div class="cm-content-down">
                    <div class="cm-content-tool">
                        <div class="cm-tool-holder"><span class="fa fa-font"></span></div>
                        <div class="cm-tool-holder"><span class="fa fa-smile-o"></span></div>
                        <div class="cm-tool-holder"><span class="fa fa-scissors"></span></div>
                        <div class="cm-tool-holder"><span class="fa fa-hand-o-right"></span></div>
                        <div class="cm-tool-holder"><span class="fa fa-microphone"></span></div>
                        <div class="cm-tool-holder"><span class="fa fa-picture-o"></span></div>
                    </div>
                    <div class="cm-content-input">
                        <div id="senderContent" class="cm-content-textarea" contenteditable="true"></div>
                    </div>
                    <button id="send" class="cm-send-btn"><span>发送</span></button>
                </div>
            </c:if>
        </div>
    </div>
</div>
<script src="${pageContext.request.contextPath}/static/js/jquery3.4.1.js"></script>
<script src="${pageContext.request.contextPath}/static/layer/layer.js"></script>
<!--数据初始化-->
<script>
    let infoCount = ${orderInfo.infos.size()};
    window.onload = function () {
        $("#userName").text("${orderInfo.user.nickName}");
        $("#infoList")[0].scrollTop = $("#infoList")[0].scrollHeight;

    }
    //详细按钮时间监听
    $("#detail").click(function () {
        let orderId = "${orderInfo.id}"
        layer.open({
            type: 2,
            title: '工单信息',
            shadeClose: true,
            shade: 0.8,
            area: ['820px', '500px'],
            content: '${pageContext.request.contextPath}/order/detail.handler?orderId=' + orderId
        });
    });
    //下载按钮时间监听
    $("#upload").click(function () {
        let path = "${orderInfo.path}";
        if (path != "") {
            let url = "${pageContext.request.contextPath}/file.handler?path=" + path;
            window.open(url);
        } else {
            layer.tips('该用户并未上传附件', '#upload', {
                tips: 3
            });
        }
    });
    //enter提交
    $(document).keyup(function (event) {
        if (event.keyCode == 13) {
            $("#send").click();
        }
    })
    //动态刷新消息链表
    setInterval(function () {
        let orderId = "${orderInfo.id}"
        $.ajax({
            url: '${pageContext.request.contextPath}/order/getOrder.handler?orderId=' + orderId,
            success: function (data) {
                let len = data.infos.length;
                let infos = data.infos;
                if (len != infoCount) {
                    infoCount = len;
                    $("#cm_history_list").empty();
                    for (let info of infos) {
                        let type = info.senderType;
                        let content = info.senderContent;
                        if (type == 1) {
                            let html = `<li class="cm-history-item">
                                            <div class="cm-history-otherhead cm-history-item-head"><img
                                                    src="${pageContext.request.contextPath}/static/img/head/head5.png">
                                             </div>
                                             <div class="cm-history-othermessage cm-history-item-message">
                                                <span>` + content   + `</span>
                                            </div>
                                         </li>`
                            $("#cm_history_list").append($(html));
                        } else if (type == 2) {
                            let html = `<li class="cm-history-item">
                                              <div class="cm-history-myhead cm-history-item-head"><img
                                                       src="${pageContext.request.contextPath}/static/img/head/head4.png">
                                                </div>
                                             <div class="cm-history-mymessage cm-history-item-message">
                                                <span>` + content   + `</span>
                                            </div>
                                         </li>`
                            $("#cm_history_list").append($(html));
                        }
                    }
                }
            }
        });
    }, 500);
</script>
<script>
    let $senderContent = $("#senderContent");
    let $cm_history_list = $("#cm_history_list");
    let staffId = "${orderInfo.staff.id}";
    let senderId = "${orderInfo.staff.id}"
    let oId = "${orderInfo.id}";

    //发送按钮监听
    $("#send").click(function () {
        if ($senderContent.text() == "") {
            layer.msg('发送内容不能为空');
        } else {
            $.ajax({
                url: "${pageContext.request.contextPath}/Info/newInfo.handler",
                type: "post",
                data: {
                    oId: oId,
                    senderId: senderId,
                    senderContent: $senderContent.text(),
                    senderType: 2
                },
                success: function (data) {
                    if (data.state) {
                        let html = `<li class="cm-history-item">
                            <div class="cm-history-myhead cm-history-item-head"><img
                                    src="${pageContext.request.contextPath}/static/img/head/head4.png">
                            </div>
                            <div class="cm-history-mymessage cm-history-item-message"><span>` + $senderContent.text() + `</span></div>
                        </li>`;
                        $cm_history_list.append($(html));
                        $("#infoList")[0].scrollTop = $("#infoList")[0].scrollHeight;
                        $senderContent.text("");
                    } else {
                        return "404"
                    }
                }
            });
        }
    });
</script>
</body>
</html>
